<script setup>
import { RouterView, useRoute, useRouter } from 'vue-router'
import { computed, ref } from 'vue'

const route = useRoute()
const router = useRouter()

const onClickLeft = () => {
  router.back()
}

const tabbarList = ref([
  {
    path: '/',
    name: '首页',
    icon: 'home-o'
  },
  {
    path: '/user',
    name: '用户',
    icon: 'friends-o'
  },
  {
    path: '/challengeBox',
    name: '擂台',
    icon: 'fire-o',
  },
  {
    path: '/welfare',
    name: '福利屋',
    icon: 'gift-o'
  },
  {
    path: '/packet',
    name: '红包',
    icon: 'gold-coin-o'
  }
])

const isShowBack = computed(() => {
  return !tabbarList.value.some(item => route.path === item.path)
})
</script>

<template>
  <div class="app-container">
    <van-nav-bar
      fixed
      :title="route.meta.title"
      :left-text="isShowBack ? '返回' : ''"
      :left-arrow="isShowBack"
      @click-left="onClickLeft"
    />

    <div class="main">
      <RouterView />
    </div>

    <van-tabbar route>
      <van-tabbar-item v-for="(tabbar, index) in tabbarList" :key="index" :to="tabbar.path" :icon="tabbar.icon"
        >{{ tabbar.name }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped>
.main {
  padding-top: 46px;
  padding-bottom: 50px;
}
</style>
